<template>
<div>
  <a-card
    style="width: 100%"
    :tab-list="tabListNoTitle"
    column=1
    :active-tab-key="noTitleKey"
    @tabChange="key => onTabChange(key)"
  >
  
    <p v-if="noTitleKey === 'userInfo'">
      <div class="userinfo">  
        <a-descriptions column="" bordered>
            <a-descriptions-item label="用户昵称">{{ userInfo.userName }}</a-descriptions-item>
            <a-descriptions-item label="用户密码">{{ userInfo.userPassword }}</a-descriptions-item>
            <a-descriptions-item label="用户账号">{{ userInfo.userAccount }}</a-descriptions-item>
        </a-descriptions>       
      </div>  
    </p>    
    <p v-if="noTitleKey === 'updateUserName'">
      <div class="userinfo">
          <a-form
          :model="userInfo"
          name="basic"
          :wrapper-col="{ span: 8 }"
          autocomplete="off"
          @finish="updateName(userInfo.userName)"
        >
          <a-form-item
            label="昵称："
            name="userName"
            :rules="[{ required: true, message: '请输入昵称!' }]"
          >
            <a-input v-model:value="userInfo.userName" />
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 4 }">
            <a-button type="primary" html-type="submit">提交</a-button>
          </a-form-item>
        </a-form>            
      </div>   
    </p>
    <p v-if="noTitleKey === 'updateUserPassword'">
      <div class="userinfo">
        <a-form
          :model="userInfo"
          name="basic"
          :wrapper-col="{ span: 8 }"
          autocomplete="off"
          @finish="updatePassword(userInfo)"
        >
          <a-form-item
            label="原密码："
            name="oldUserPassword"
            :rules="[{ required: true, message: '请输入原密码!' }]"
          >
            <a-input-password v-model:value="userInfo.oldUserPassword" />
          </a-form-item>

          <a-form-item
            label="新密码："
            name="newUserPassword"
            :rules="[{ required: true, message: '请输入新密码!' }]"
          >
            <a-input-password v-model:value="userInfo.newUserPassword" />
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 4 }">
            <a-button type="primary" html-type="submit">提交</a-button>
          </a-form-item>
        </a-form>            
      </div>
    </p>
  </a-card>    
</div>

</template>
  
<script setup lang="ts">
import { message as Message } from 'ant-design-vue';
import { onMounted, ref } from 'vue';
import type { NameInfoParams, PasswordInfoParams } from '~@/api/list/card-list';
import { updateNameApi, updatePasswordApi } from '~@/api/list/card-list';
// import router from '~@/router'

const router = useRouter()
const userStore = useUserStore()
const noTitleKey = ref('userInfo');
const multiTabStore = useMultiTab()
const layoutMenuStore = useLayoutMenu()

const tabListNoTitle = [
  {
    key: 'userInfo',
    tab: '用户信息',
  },
  {
    key: 'updateUserName',
    tab: '修改昵称',
  },
  {
    key: 'updateUserPassword',
    tab: '修改密码',
  },
];
const userInfo = reactive({
    id: 0,
    userAccount: '',
    userName: '',
    userPassword: '',
    oldUserPassword:'',
    newUserPassword:''
})

// 获取用户信息
async function getUserInfo() {
  if(userStore.userInfo) {
    await userStore.getUserInfo()
    userInfo.id = userStore.userInfo.id,
    userInfo.userAccount = userStore.userInfo.userAccount,
    userInfo.userName = userStore.userInfo.userName,
    userInfo.userPassword = userStore.userInfo.userPassword
  }
}

// 切换页面
const onTabChange = (value: string) => {
  noTitleKey.value = value;
};

// 修改昵称
const updateName = async (params: any) => {
    let data = {
      id: userInfo.id,
      userName: params,
    } as unknown as NameInfoParams
    let { message } =  await updateNameApi(data)
    if(userStore.userInfo) {
      userStore.userInfo.userName = params      
    }
    Message.success(message)
}

// 修改密码
const updatePassword = async (params: any) => {
    if(params.newUserPassword == params.oldUserPassword){
      Message.error('修改密码与原密码相同，请重新修改...')
      return
    }
    let data = {
        id: userInfo.id,
        newUserPassword:params.newUserPassword,
        oldUserPassword:params.oldUserPassword
    } as PasswordInfoParams
    let { code, message } = await updatePasswordApi(data)
    if(code === 500) {
      Message.error(message)
      return
    }
    if(code === 200) {
      Message.success(message)
      const hide = Message.loading('退出登录...', 0)
      try {
        await userStore.logout()
      }
      finally {
        hide()
        Message.success('退出登录成功', 3)
        router.push({
          path: '/login',
        }).then(() => {
          multiTabStore.clear()
          layoutMenuStore.clear()
        })     
      }      
    }

}

onMounted(() => {
  getUserInfo()
})
</script>
  
<style lang="less">
.userinfo {
    height: calc(100vh - 167px);
    display: flex;
    flex-direction: column;
}
.button {
    padding-top: 20px;
    padding-left: 80px;
}
</style>

  